<template>
  <div class="create-course-container">
    <div class="create-course-box">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span class="breadcrumb-item" @click="goBack">首页</span>
        <span class="separator">></span>
        <span class="breadcrumb-item">创建课程</span>
      </div>
      
      <div class="course-content">
        <!-- 左侧主要内容 -->
        <div class="course-main-info">
          <!-- 课程封面上传区域 -->
          <div class="course-cover">
            <el-upload
              class="cover-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :http-request="handleCustomUpload"
              :show-file-list="false"
              :on-change="handleTitleImgChange"
              :before-upload="beforeImageUpload"
              accept="image/*">
              <img v-if="titleImgUrl" :src="titleImgUrl" class="cover-image">
              <div v-else class="cover-placeholder">
                <i class="el-icon-picture"></i>
                <span>点击上传课程封面</span>
              </div>
            </el-upload>
          </div>

          <!-- 课程标题和基本信息 -->
          <div class="course-header">
            <div class="course-type">创建新课程</div>
            <el-form :model="courseForm" :rules="rules" ref="courseForm" label-position="top" class="course-form">
              <el-form-item label="课程名称" prop="title" class="title-item">
                <el-input v-model="courseForm.title" placeholder="请输入课程名称"></el-input>
              </el-form-item>
              
              <div class="course-meta">
                <div class="meta-left">
                  <el-form-item label="课程分类" prop="categoryId" style="width: 200px;">
                    <el-select v-model="courseForm.categoryId" placeholder="请选择课程分类" style="width: 200px;">
                      <el-option :value="1" label="学术类课程"></el-option>
                      <el-option :value="2" label="技术与工程类课程"></el-option>
                      <el-option :value="3" label="商业与管理类课程"></el-option>
                      <el-option :value="4" label="艺术与设计类课程"></el-option>
                      <el-option :value="5" label="职业技能类课程"></el-option>
                      <el-option :value="6" label="健康与医学类课程"></el-option>
                      <el-option :value="7" label="语言与文化类课程"></el-option>
                      <el-option :value="8" label="科技与未来趋势类课程"></el-option>
                      <el-option :value="9" label="体育与健身类课程"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="课程价格" prop="price" class="price-item">
                    <el-input-number 
                      v-model="courseForm.price" 
                      :min="0" 
                      :precision="2" 
                      :step="0.01" 
                      controls-position="right"
                      style="width: 200px;">
                    </el-input-number>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>

          <!-- 课程功能区 -->
          <div class="course-features">
            <div class="feature-item">
              <i class="el-icon-medal"></i>
              完善课程内容，获得更多曝光
            </div>
            <div class="feature-item">
              <i class="el-icon-picture"></i>
              上传高质量图片，提升课程吸引力
            </div>
            <div class="feature-item">
              <i class="el-icon-s-finance"></i>
              设置合理价格，增加课程转化率
            </div>
          </div>

          <!-- 课程详情标签页 -->
          <div class="course-tabs">
            <div class="tab-header">
              <div class="tab active">课程详情</div>
            </div>
            <div class="tab-content">
              <el-form :model="courseForm" ref="courseDetailForm">
                <el-form-item label="课程简介" prop="description">
                  <div class="markdown-editor">
                    <div class="editor-toolbar">
                      <el-button-group>
                        <el-button size="small" @click="togglePreview">
                          <el-icon><View /></el-icon>
                          {{ isPreview ? '编辑' : '预览' }}
                        </el-button>
                      </el-button-group>
                      <div class="markdown-tips">
                        <el-tooltip
                          effect="dark"
                          placement="top"
                          :show-after="500"
                        >
                          <template #content>
                            <div class="markdown-help">
                              <h4>Markdown 语法提示：</h4>
                              <p># 一级标题</p>
                              <p>## 二级标题</p>
                              <p>**粗体**</p>
                              <p>*斜体*</p>
                              <p>- 无序列表</p>
                              <p>1. 有序列表</p>
                              <p>[链接文字](链接地址)</p>
                              <p>![图片描述](图片地址)</p>
                            </div>
                          </template>
                          <el-button size="small">
                            <el-icon><QuestionFilled /></el-icon>
                            语法帮助
                          </el-button>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="editor-content">
                      <el-input
                        v-if="!isPreview"
                        v-model="courseForm.description"
                        type="textarea"
                        :rows="8"
                        placeholder="支持 Markdown 格式，点击预览按钮查看效果"
                      />
                      <div v-else class="markdown-preview markdown-content" v-html="renderMarkdown(courseForm.description)"></div>
                    </div>
                  </div>
                </el-form-item>

                <!-- 课程内容图片展示 -->
                <div class="course-gallery">
                  <h3 class="gallery-title">课程内容图片</h3>
                  <div class="gallery-grid">
                    <!-- 已上传图片列表 -->
                    <div v-for="(item, index) in contentImgList" :key="index" class="gallery-item">
                      <img :src="item.url || (item.raw ? URL.createObjectURL(item.raw) : '')" class="gallery-image">
                      <div class="image-actions">
                        <i class="el-icon-delete" @click="removeImage(index)"></i>
                      </div>
                    </div>
                    
                    <!-- 上传按钮，仅当图片少于4张时显示 -->
                    <div v-if="contentImgList.length < 4" class="gallery-upload-item" @click="triggerContentImgUpload">
                      <div class="upload-icon">
                        <i class="el-icon-plus"></i>
                        <span>添加图片</span>
                      </div>
                    </div>
                    
                    <!-- 隐藏的上传组件 -->
                    <input type="file" ref="contentImgInput" style="display: none;" @change="handleContentImgInputChange" accept="image/*">
                  </div>
                </div>

                <!-- 课程排期设置 -->
                <div class="schedule-section">
                  <h3>设置具体课程安排 <span class="required-hint">（必填项：至少添加一个）</span></h3>
                  <div class="schedule-list">
                    <div v-for="(schedule, index) in scheduleList" :key="index" class="schedule-item">
                      <schedule-time-range-picker
                        v-model:date="schedule.date"
                        v-model:startTime="schedule.startTime"
                        v-model:endTime="schedule.endTime"
                        v-model:repeatType="schedule.repeatType"
                        v-model:repeatEndDate="schedule.repeatEndDate"
                        @delete="removeSchedule(index)"
                        @validate="(valid) => validateSchedule(index, valid)"
                        :can-delete="scheduleList.length > 1"
                      />
                    </div>
                    <div class="add-button-container">
                      <el-button type="primary" @click="addSchedule" class="add-btn">
                        <i class="el-icon-plus"></i> 添加课程安排
                      </el-button>
                    </div>
                  </div>
                </div>
                
                <div class="form-actions">
                  <button type="button" class="submit-btn" @click="onSubmitButtonClick" :disabled="loading">
                    {{ loading ? '创建中...' : '创建课程' }}
                  </button>
                  <button type="button" class="reset-btn" @click="resetForm">
                    重置表单
                  </button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
        
        <!-- 右侧帮助信息 -->
        <div class="course-side-info">
          <div class="help-card">
            <h3 class="section-title">
              <i class="el-icon-question"></i>
              创建帮助
            </h3>
            <div class="help-content">
              <div class="help-item">
                <h4>如何创建一个优质课程？</h4>
                <p>提供详实的课程描述，上传高质量的课程封面和内容图片，设置合理的课程价格。</p>
              </div>
              <div class="help-item">
                <h4>封面图片建议</h4>
                <p>建议上传16:9比例的高清图片，最佳尺寸为1280×720像素，大小不超过5MB。</p>
              </div>
              <div class="help-item">
                <h4>内容图片建议</h4>
                <p>最多可上传4张内容图片，用于展示课程的核心内容，帮助学生了解课程。</p>
              </div>
            </div>
          </div>
          
          <div class="tips-card">
            <h3 class="section-title">
              <i class="el-icon-info"></i>
              创建提示
            </h3>
            <div class="tips-content">
              <div class="tip-item">
                <i class="el-icon-check"></i>
                <span>填写完整的课程描述，提高课程吸引力</span>
              </div>
              <div class="tip-item">
                <i class="el-icon-check"></i>
                <span>上传清晰的课程封面，吸引学生注意</span>
              </div>
              <div class="tip-item">
                <i class="el-icon-check"></i>
                <span>添加详细的内容图片，展示课程价值</span>
              </div>
              <div class="tip-item">
                <i class="el-icon-check"></i>
                <span>设置合理的课程价格，提高转化率</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { View, QuestionFilled } from '@element-plus/icons-vue'
import { marked } from 'marked'
import ScheduleTimeRangePicker from '@/components/common/ScheduleTimeRangePicker.vue'
import { createCourseWithFormData } from '@/api/course'

export default {
  name: 'CreateCourse',
  components: {
    ScheduleTimeRangePicker,
    View,
    QuestionFilled
  },
  data() {
    return {
      courseForm: {
        title: '',
        categoryId: '',
        price: 0,
        description: '',
        titleImg: null,
        contentImgs: []
      },
      titleImgUrl: '',
      contentImgList: [],
      rules: {
        title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          { min: 2, max: 50, message: '课程名称长度为2-50个字符', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择课程分类', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入课程价格', trigger: 'blur' },
          { type: 'number', message: '价格必须为数字', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入课程简介', trigger: 'blur' }
        ],
        titleImg: [
          { required: true, message: '请上传课程封面', trigger: 'change' }
        ]
      },
      loading: false,
      submitAttempted: false,
      scheduleList: [],
      scheduleValidations: Array(10).fill(false),
      isPreview: false
    }
  },
  mounted() {
    if (this.scheduleList.length === 0) {
      this.addSchedule();
    }
  },
  methods: {
    togglePreview() {
      this.isPreview = !this.isPreview;
    },
    
    renderMarkdown(content) {
      if (!content) return '';
      try {
        return marked(content);
      } catch (error) {
        console.error('Markdown渲染错误:', error);
        return content;
      }
    },
    
    validateSchedule(index, isValid) {
      this.scheduleValidations[index] = isValid;
    },
    
    validateFormData() {
      // 验证内容图片
      if (this.courseForm.contentImgs.length === 0) {
        this.$message({
          message: '请至少上传一张内容图片',
          type: 'warning',
          duration: 2000
        });
        return false;
      }
      
      // 验证课程封面是否已上传
      if (!this.courseForm.titleImg) {
        this.$message({
          message: '请上传课程封面',
          type: 'warning',
          duration: 2000
        });
        return false;
      }
      
      // 验证课程安排
      if (this.scheduleList.length === 0) {
        this.$message({
          message: '请至少添加一条课程安排',
          type: 'warning',
          duration: 2000
        });
        return false;
      }
      
      // 验证每条课程安排数据是否完整
      const scheduleValid = this.scheduleList.every((item, index) => {
        const isValid = this.scheduleValidations[index];
        if (!isValid) {
          this.$message({
            message: `第${index + 1}条课程安排数据不完整，请检查`,
            type: 'warning',
            duration: 2000
          });
        }
        return isValid;
      });
      
      if (!scheduleValid) {
        return false;
      }
      
      return true;
    },
    
    onSubmitButtonClick() {
      this.submitAttempted = true;
      
      this.$refs.courseForm.validate((valid) => {
        if (valid) {
          if (this.validateFormData()) {
            this.submitForm();
          }
        } else {
          this.$message({
            message: '请正确填写所有必填项',
            type: 'error',
            duration: 2000
          });
          return false;
        }
      });
    },
    
    handleCustomUpload(options) {
      options.onSuccess();
    },
    
    handleTitleImgChange(file) {
      if (!file) {
        return;
      }
      
      const rawFile = file.raw || file;
      this.courseForm.titleImg = rawFile;
      
      if (rawFile && rawFile instanceof File) {
        try {
          const url = URL.createObjectURL(rawFile);
          this.titleImgUrl = url;
        } catch (error) {
          this.$message.error('封面图片预览失败，请重新上传');
        }
      }
      
      if (this.submitAttempted) {
        this.$refs.courseForm.validateField('titleImg');
      }
    },
    
    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isImage) {
        this.$message({
          message: '只能上传图片文件!',
          type: 'error',
          duration: 2000
        });
        return false;
      }
      if (!isLt5M) {
        this.$message({
          message: '图片大小不能超过 5MB!',
          type: 'error',
          duration: 2000
        });
        return false;
      }
      return true;
    },
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.titleImgUrl = '';
      this.contentImgList = [];
      this.courseForm.titleImg = null;
      this.courseForm.contentImgs = [];
      this.submitAttempted = false;
      this.scheduleList = [];
      this.scheduleValidations = Array(10).fill(false);
      
      this.addSchedule();
      
      this.$message({
        message: '表单已重置',
        type: 'success',
        duration: 1500
      });
    },
    
    removeImage(index) {
      if (this.contentImgList.length > 0 && index >= 0 && index < this.contentImgList.length) {
        this.contentImgList.splice(index, 1);
        this.courseForm.contentImgs = this.contentImgList.map(item => item.raw || item);
      }
    },
    
    triggerContentImgUpload() {
      if (this.$refs.contentImgInput) {
        this.$refs.contentImgInput.click();
      }
    },
    
    handleContentImgInputChange(event) {
      const files = event.target.files;
      if (!files || files.length === 0) {
        return;
      }
      
      const file = files[0];
      
      if (!this.beforeImageUpload(file)) {
        return;
      }
      
      if (this.contentImgList.length >= 4) {
        this.$message({
          message: '最多只能上传4张内容图片',
          type: 'warning',
          duration: 2000
        });
        return;
      }
      
      try {
        const fileObj = {
          raw: file,
          name: file.name,
          url: URL.createObjectURL(file)
        };
        
        this.contentImgList.push(fileObj);
        this.courseForm.contentImgs = this.contentImgList.map(item => item.raw || item);
        
        if (this.$refs.contentImgInput) {
          this.$refs.contentImgInput.value = '';
        }
      } catch (error) {
        this.$message.error('图片处理失败，请重新上传');
      }
    },
    
    formatDateTime(date) {
      const pad = (num) => String(num).padStart(2, '0');
      
      const year = date.getFullYear();
      const month = pad(date.getMonth() + 1);
      const day = pad(date.getDate());
      const hours = pad(date.getHours());
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
    async submitForm() {
      try {
        if (!this.validateFormData()) {
          return;
        }
        
        this.loading = true;
        
        const formData = new FormData();
        
        // 添加课程基本信息
        formData.append('title', this.courseForm.title);
        formData.append('categoryId', this.courseForm.categoryId);
        formData.append('price', this.courseForm.price);
        formData.append('description', this.courseForm.description);
        formData.append('titleImg', this.courseForm.titleImg);
        
        // 添加课程内容图片
        this.courseForm.contentImgs.forEach(img => {
          formData.append('contentImgs', img);
        });

        // 处理课程安排
        const schedules = this.scheduleList.map(item => ({
          date: item.date ? this.formatDateTime(new Date(item.date)).split(' ')[0] : '',
          startTime: item.startTime ? this.formatDateTime(new Date(item.startTime)) : '',
          endTime: item.endTime ? this.formatDateTime(new Date(item.endTime)) : '',
          repeatType: item.repeatType || 'once',
          repeatEndDate: item.repeatEndDate ? this.formatDateTime(new Date(item.repeatEndDate)).split(' ')[0] : null
        }));
        formData.append('schedules', JSON.stringify(schedules));

        const response = await createCourseWithFormData(formData);
        console.log('创建课程响应:', response); // 添加日志
        
        if (response.data && response.data.code === 200) {
          // 处理嵌套的响应数据
          this.$message({
            message: response.data.message || '课程创建成功',
            type: 'success',
            duration: 2000
          });
          
          // 修改跳转路径
          setTimeout(() => {
            this.$router.push('/home');
          }, 1500);
        } else if (response.code === 200) {
          // 处理直接的响应数据
          this.$message({
            message: response.message || '课程创建成功',
            type: 'success',
            duration: 2000
          });
          
          // 修改跳转路径
          setTimeout(() => {
            this.$router.push('/home');
          }, 1500);
        } else {
          // 处理错误情况
          const errorMsg = (response.data && response.data.message) || response.message || '课程创建失败';
          this.$message({
            message: errorMsg,
            type: 'error',
            duration: 3000
          });
        }
      } catch (error) {
        console.error('创建课程错误:', error);
        this.$message({
          message: '课程创建失败: ' + (error.message || '服务器错误'),
          type: 'error',
          duration: 3000
        });
      } finally {
        this.loading = false;
      }
    },

    addSchedule() {
      this.scheduleList.push({
        date: '',
        startTime: null,
        endTime: null,
        repeatType: 'once',
        repeatEndDate: ''
      });
    },

    removeSchedule(index) {
      if (this.scheduleList.length <= 1) {
        this.$message({
          message: '至少需要保留一条课程安排',
          type: 'warning',
          duration: 2000
        });
        return;
      }
      if (this.scheduleList.length > 0 && index >= 0 && index < this.scheduleList.length) {
        this.scheduleList.splice(index, 1);
      }
    }
  }
}
</script>

<style scoped>
.create-course-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.create-course-box {
  max-width: 1400px;
  margin: 0 auto;
}

.breadcrumb {
  padding: 15px 0;
  color: #666;
  font-size: 14px;
}

.breadcrumb-item {
  cursor: pointer;
}

.breadcrumb-item:hover {
  color: #409EFF;
}

.separator {
  margin: 0 8px;
  color: #999;
}

.course-content {
  display: grid;
  grid-template-columns: minmax(1000px, 1fr) 300px;
  gap: 20px;
}

.course-main-info {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  min-width: 1000px;
}

.course-cover {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  background-color: #f5f7fa;
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #909399;
}

.cover-placeholder i {
  font-size: 48px;
  margin-bottom: 15px;
}

.cover-uploader {
  width: 100%;
  height: 100%;
}

.course-header {
  padding: 20px;
}

.course-type {
  display: inline-block;
  padding: 4px 12px;
  background: #fff3e6;
  color: #ff9900;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 15px;
}

.course-form {
  margin-top: 15px;
}

/* 控制课程标题输入框宽度 */
.title-item {
  max-width: 500px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.meta-left {
  display: flex;
  gap: 20px;
}

.meta-item {
  margin-bottom: 0;
}

/* 控制课程分类下拉框的宽度 */
.category-item {
  width: 200px !important;
}

.category-item .el-form-item__content {
  width: 200px !important;
}

.category-item >>> .el-select {
  width: 200px !important;
}

.category-item >>> .el-input {
  width: 200px !important;
}

.category-item >>> .el-input__inner {
  width: 200px !important;
}

.course-features {
  display: flex;
  padding: 15px 20px;
  background: #fafafa;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.feature-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.feature-item i {
  color: #409EFF;
}

.course-tabs {
  padding: 20px;
}

.tab-header {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab {
  padding: 10px 0;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #409EFF;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409EFF;
}

.tab-content {
  padding: 10px 0;
}

.course-gallery {
  margin-top: 25px;
  margin-bottom: 25px;
}

.gallery-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-upload-item {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background-color: #f5f7fa;
  transition: all 0.3s;
}

.gallery-upload-item:hover {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.upload-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #909399;
}

.upload-icon i {
  font-size: 28px;
  margin-bottom: 8px;
}

.image-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .image-actions {
  opacity: 1;
}

.image-actions i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
  transition: all 0.3s;
}

.image-actions i:hover {
  background-color: rgba(255,255,255,0.4);
  transform: scale(1.1);
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
}

.submit-btn {
  padding: 10px 24px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background: #66b1ff;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.reset-btn {
  padding: 10px 24px;
  background: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 右侧信息卡片样式 */
.course-side-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-card, .tips-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  padding: 15px;
  border-bottom: 1px solid #eee;
  margin: 0;
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
}

.help-content {
  padding: 15px;
}

.help-item {
  margin-bottom: 15px;
}

.help-item:last-child {
  margin-bottom: 0;
}

.help-item h4 {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.help-item p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.tips-content {
  padding: 15px;
}

.tip-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #666;
}

.tip-item i {
  color: #67c23a;
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .course-content {
    grid-template-columns: 1fr;
  }
  
  .course-side-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .meta-left {
    flex-direction: column;
    gap: 15px;
  }
  
  .course-side-info {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* 添加价格输入框样式 */
.price-item {
  width: 200px !important;
}

.price-item .el-input-number {
  width: 200px !important;
}

.price-item >>> .el-input-number__decrease,
.price-item >>> .el-input-number__increase {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
}

.price-item >>> .el-input__inner {
  text-align: left;
  padding-left: 15px;
}

.course-meta {
  width: 200px !important;
}

.schedule-section {
  margin-bottom: 30px;
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.time-separator {
  margin: 0 10px;
  color: #666;
}

/* 添加按钮样式 */
.add-btn {
  width: 200px !important;
  margin: 10px auto !important;
  display: block !important;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .schedule-item {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .schedule-item > * {
    flex: 1 1 calc(50% - 10px);
    min-width: 120px;
  }
  
  .time-separator {
    flex: 0 0 auto;
  }

  .el-button.is-circle {
    flex: 0 0 auto;
  }
}

.schedule-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.required-hint {
  color: #f56c6c;
  font-size: 14px;
  font-weight: normal;
}

/* 添加新的删除按钮样式 */
.delete-btn-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
  background-color: #f8f9fa;
  margin-left: auto;
}

.delete-btn-wrapper:hover {
  background-color: #f2f2f2;
}

.delete-text {
  color: #f56c6c;
  font-size: 14px;
}

.add-button-container {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.add-btn {
  padding-left: 20px;
  padding-right: 20px;
}

.markdown-editor {
  width: 100%;
}

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}

.markdown-tips {
  display: flex;
  align-items: center;
}

.editor-content {
  width: 100%;
}

.markdown-preview {
  min-height: 300px;
  width: 100%;
}

.markdown-help {
  padding: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.markdown-help h4 {
  margin: 0 0 8px 0;
  color: #409eff;
}

.markdown-help p {
  margin: 4px 0;
  color: #606266;
}

/* Markdown内容样式 */
.markdown-content {
  line-height: 1.6;
  color: #333;
}

.markdown-content :deep(h1) {
  font-size: 1.8em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(h2) {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(h3) {
  font-size: 1.3em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(p) {
  margin-bottom: 1em;
}

.markdown-content :deep(ul), .markdown-content :deep(ol) {
  margin-bottom: 1em;
  padding-left: 2em;
}

.markdown-content :deep(li) {
  margin-bottom: 0.5em;
}

.markdown-content :deep(code) {
  background-color: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

.markdown-content :deep(pre) {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 1em;
}

.markdown-content :deep(blockquote) {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin-left: 0;
  color: #666;
}

.markdown-content :deep(a) {
  color: #1890ff;
  text-decoration: none;
}

.markdown-content :deep(a:hover) {
  text-decoration: underline;
}

.markdown-content :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin: 1em 0;
}

.markdown-content :deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.markdown-content :deep(th), .markdown-content :deep(td) {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.markdown-content :deep(th) {
  background-color: #f5f5f5;
}

/* 增大表单项内容区域尺寸 */
:deep(.el-form-item__content) {
  width: 100% !important;
}

:deep(.el-textarea__inner) {
  min-height: 300px !important;
}

:deep(.el-form-item) {
  margin-bottom: 25px !important;
}

:deep(.el-form-item__label) {
  padding-bottom: 8px !important;
  line-height: 1.5 !important;
}
</style>

<style>
/* 移除之前的全局样式 */
.el-select,
.el-select.el-select--medium,
.el-select-dropdown,
.el-select-dropdown__wrap,
.el-select-dropdown__list,
.el-select .el-input,
.el-select .el-input__inner,
.el-popper[x-placement^="bottom"],
.el-popper[x-placement^="top"] {
  width: 200px !important;
}

/* 添加新的全局样式 */
.el-select-dropdown.el-popper {
  width: 200px !important;
}

.el-select-dropdown.el-popper[x-placement^="bottom"] {
  width: 200px !important;
}

.el-select-dropdown.el-popper[x-placement^="top"] {
  width: 200px !important;
}

.el-select-dropdown__wrap {
  max-width: 200px !important;
}

.el-select-dropdown__list {
  max-width: 200px !important;
}
</style> 